import React from 'react'
import { Table, Card, Modal, Button, message } from 'antd'
import axios from '../../axios'
import Utils from './../../utils/utils'

export default class BasicTable extends React.Component {
  state = {}
  params = {
    page:1
  }
  componentDidMount(){
    const dataSource = [
      {
        id:'1',
        userName: '研究院',
        sex:'1',
        state:1,
        birthday: '2009-01-01',
        address: '厦门软件园二期'
      },
      {
        id:'2',
        userName: '研究院',
        sex:'1',
        state:1,
        birthday: '2009-01-01',
        address: '厦门软件园二期'
      }
    ]
    this.setState({
      dataSource
    })
    this.getTableData()
  }

  //获取mock表格数据
  getTableData = () => {
    axios.ajax({
      url: '/table/list',
      data: {
        params: {
          page: this.params.page
        }
      }
    }).then((res)=>{
      if(res.code === '0') {
        this.setState({
          dataSource2:res.data.list,
          selectedRowKeys: [],
          // 分页
          pagination: Utils.pagination(res,(current)=>{
            this.params.page = current
            this.getTableData()
          })
        })
      }
    })
  }

  // 点击单选
  onRowClick = (record,index) => {
    let selectKey = [index]
    Modal.info({
      title:'信息',
      content:`姓名：${record.userName}, 性别：${record.sex}`
    })
    this.setState({
      selectedRowKeys:selectKey,
      selectItem: record
    })
  }

  // 选中多条数据，点击删除
  handleDelete = () => {
    let rows = this.state.selectedRows
    let ids = rows.map((item)=>{
      return item.id
    })
    Modal.confirm({
      title: '删除提示',
      content: `您确定要删除这些数据吗？${ids.join(',')}`,
      onOk: ()=> {
        message.success('删除成功')
        this.getTableData()
      }
    })
  }

  render() {
    const columns = [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id'
      },{
        title: '姓名',
        dataIndex: 'userName',
        key: 'userName'
      },{
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        render(h) {
          return h === 1 ? '男' : '女'
        }
      },{
        title: '状态',
        dataIndex: 'state',
        key:'state',
        render(h) {
          let config = {
            '1':'咸鱼一条',
            '2':'风华浪子',
            '3':'北大才子',
            '4':'百度FE',
            '5':'创业者'
          }
          return config[h]
        },
      },{
        title: '生日',
        dataIndex: 'birthday',
        key: 'birthday'
      },{
        title: '地址',
        dataIndex: 'address',
        key:'address'
      }
    ]

    const { selectedRowKeys } = this.state
    const rowSelection = { // 单选属性定义
      type: 'radio',
      selectedRowKeys
    }
    const rowCheckSelection = {
      type: 'checkbox',
      selectedRowKeys,
      onChange:(selectedRowKeys, selectedRows)=>{
        this.setState({
          selectedRowKeys,
          selectedRows
        })
      }
    }

    return (
      <div>
        <Card title="基础表格">
          <Table
            bordered
            dataSource={this.state.dataSource}
            columns={columns}
            pagination={false}
            rowKey="id" // 指定识别主键
          />
        </Card>

        <Card title="动态数据渲染表格-Mock" style={{margin:'10px 0'}}>
          <Table
            dataSource={this.state.dataSource2}
            columns={columns}
            pagination={false}
            rowKey="id" // 指定识别主键
          />
        </Card>

        <Card title="Mock-单选" style={{margin:'10px 0'}}>
          <Table
            dataSource={this.state.dataSource2}
            columns={columns}
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.onRowClick(record,index) // 选中当前行 单选
                }
              };
            }}
            rowSelection={rowSelection}
            pagination={false}
            rowKey="id" // 指定识别主键
          />
        </Card>

        <Card title="Mock-多选" style={{margin:'10px 0'}}>
          <div style={{marginBottom:10}}>
            <Button onClick={this.handleDelete}>删除</Button>
          </div>
          <Table
            dataSource={this.state.dataSource2}
            columns={columns}
            rowSelection={rowCheckSelection}
            pagination={this.state.pagination}
            rowKey="id" // 指定识别主键
          />
        </Card>
      </div>
    )
  }
}